<template>
  <el-dialog :title="showTitle" :visible="showDialog" @close="close">
    <!-- 放置表单内容 -->
    <el-form ref="form" label-width="120px" :model="formData" :rules="rules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="formData.name" placeholder="2-10个字符" style="width: 80%" size="small" />
      </el-form-item>

      <el-form-item label="部门编码" prop="code">
        <el-input v-model="formData.code" placeholder="2-10个字符" style="width: 80%" size="small" />
      </el-form-item>

      <el-form-item label="部门负责人" prop="managerId">
        <el-select v-model="formData.managerId" placeholder="请选择负责人" style="width: 80%" size="small">
          <!-- label是要展示的文本 对于value当用户选择一个选项时，Element UI 会执行以下逻辑：
          找到 value 等于 v-model 值的 <el-option>。
          获取该选项的 label，并显示在下拉框中。-->
          <el-option v-for="item in managerList" :key="item.id" :label="item.username" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="formData.introduce" type="textarea" placeholder="1-100个字符" style="width: 80%" size="small"
          :rows="4" />
      </el-form-item>

      <el-row type="flex" justify="center">
        <!-- span="12" 的含义
        span：指定元素占用的列数（取值范围：1-24）。
        :span="12"：动态绑定 span 属性为 12，表示元素占用 12/24 = 50% 的宽度 -->
        <el-col :span="12">
          <el-button type="primary" size="small" @click="btnOk">确认</el-button>
          <el-button size="small" @click="cancel">取消</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
  import { editDepartmentDetailAPI, getDepartmentDetailAPI, getDepartmentAPI, getDepartmentMannerAPI, updateDepartmentAPI } from '@/api/department'
  export default {
    props: {
      showDialog: {
        type: Boolean,
        // eslint-disable-next-line vue/require-default-prop, vue/require-prop-type-constructor
        default: false
      },
      // 接受点击时父组件传过来的当前部门id 为了以后的确认按钮
      currentNodeId: {
        type: Number,
        default: null
      }
    },
    data() {
      return {
        // 部门负责人信息
        managerList: [],
        // 表单绑定的数据
        formData: {
          code: '', // 部门编码
          introduce: '', // 部门介绍
          managerId: '', // 部门负责人id
          name: '', // 部门名称
          pid: '' // 父级部门的id
        },
        // 表单校验规则
        rules: {

          // 校验部门名称
          name: [
            { required: true, message: '输入内容不能为空', trigger: 'blur' },
            { min: 2, max: 10, message: '长度需为2-10个字符之间', trigger: 'blur' },
            {
              trigger: 'blur',
              // 自定义校验模式
              // value 就是当前输入的name
              validator: async (rule, value, callback) => {
                let res = await getDepartmentAPI()
                // 判断当前为编辑模式还是新增模式 当前为编辑模式
                if (this.formData.id) {
                  res = res.filter(item => item.id !== this.formData.id)
                }
                // 遍历数组 查看是否有这一项的name
                const item = res.find(item => item.name === value)
                if (item) {
                  // 存在这个name 提示用户
                  callback(new Error('该部门已存在'))
                } else {
                  callback()
                }
              }
            }
          ],

          // 校验编码
          code: [
            { required: true, message: '输入内容不能为空', trigger: 'blur' },
            { min: 2, max: 10, message: '长度需为2-10个字符之间', trigger: 'blur' },
            {
              trigger: 'blur',
              // 自定义校验模式 避免重复
              validator: async (rule, value, callback) => {
                let res = await getDepartmentAPI()
                // 判断当前为编辑模式还是新增模式 当前为编辑模式
                if (this.formData.id) {
                  // 编辑状态
                  res = res.filter(item => item.id !== this.formData.id)
                }
                // 遍历数组 查看是否有这一项的name
                const item = res.find(item => item.code === value)
                if (item) {
                  // 存在这个name 提示用户
                  callback(new Error('该部门编码已存在'))
                } else {
                  callback()
                }
              }
            }
          ],
          // 校验部门介绍
          introduce: [
            { required: true, message: '输入内容不能为空', trigger: 'blur' },
            { min: 1, max: 100, message: '长度需为1-100个字符之间', trigger: 'blur' }
          ],
          // 校验部门负责人
          managerId: [
            { required: true, message: '输入内容不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    computed: {
      showTitle() {
        return this.formData.id ? '编辑部门' : '新增部门'
      }
    },
    created() {
      this.getManagerList()
    },
    methods: {
      // 获取部门详情
      async getDepartmentDetail() {
        // 调用接口 将结果赋值给表单
        this.formData = await getDepartmentDetailAPI(this.currentNodeId)
      },
      // 关闭弹窗
      close() {
        // 表单置空 置空的是formDate里的数据 id是动态添加的 并不会清除 直接赋予一个新的对象 id也就随之消失
        this.formData = {
          code: '', // 部门编码
          introduce: '', // 部门介绍
          managerId: '', // 部门负责人id
          name: '', // 部门名称
          pid: '' // 父级部门的id
        }
        this.$refs.form.resetFields()
        // 修改父组件的showDialog
        // update:propName 这样的事件命名格式是 Vue.js 框架专门设计的，目的是让父子组件之间的数据流动更加清晰、规范，同时保持与单向数据流原则的一致性。
        this.$emit('update:showDialog', false)
      },
      // 获取部门负责人的信息
      async getManagerList() {
        this.managerList = await getDepartmentMannerAPI()
      },

      // 点击确认按钮
      btnOk() {
        let msg = '新增'
        // 1.表单校验
        this.$refs.form.validate(async valid => {
          // 表单校验通过
          if (valid) {
            // 区分编辑还是新增
            if (this.formData.id) {
              // 编辑状态 调用编辑部门的接口
              await editDepartmentDetailAPI(this.formData)
              msg = '编辑'
            } else {
              // 1.调用新增部门接口
              await updateDepartmentAPI({ ...this.formData, pid: this.currentNodeId })
            }
            // 通知父组件更新数据
            this.$emit('updateDepartment')
            this.$message.success(`${msg}部门成功`)
            // 关闭弹窗
            this.close()
          }
        })
      },
      // 点击取消按钮
      cancel() {
        this.close()
      }
    }
  }
</script>

<style></style>
